<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>畅销书排行榜</title>
		<style>
			body{
				width: 300px;
			}
			h1{
				font-size: 16px;
				color: white;
				text-indent: 1em;
				line-height:30px;
				background-color: #518700;
				background-image: url(img/bang.gif);
				background-position: 120px,15px;
				background-repeat:no-repeat;
				background-size: contain;
			}
			ul{
				background:linear-gradient(to bottom,#F9FBCB,#F8F8F3);
				font-size: 12px;
				line-height: 28px;
			}
			a{
				color: #1A66B3;
				text-decoration: none;
			}
			a:hover{
				text-decoration: underline;
			}
			ul li{
				list-style: none;
				text-indent: 2em;
			}
			ul li:first-of-type{
				background-image: url(img/book_no01.gif);
				background-position: left;
				background-size: 17px,17px;
				background-repeat:no-repeat;
				
			}
			ul li:nth-of-type(2){
				background-image: url(img/book_no02.gif);
				background-position: left;
				background-size: 17px,17px;
				background-repeat:no-repeat;
			}
			ul li:nth-of-type(3){
				background-image: url(img/book_no03.gif);
				background-position: left;
				background-size: 17px,17px;
				background-repeat:no-repeat;
			}
			ul li:nth-of-type(4){
				background-image: url(img/book_no04.gif);
				background-position: left;
				background-size: 13px,13px;
				background-repeat:no-repeat;
			}
			ul li:nth-of-type(5){
				background-image: url(img/book_no05.gif);
				background-position: left;
				background-size: 13px,13px;
				background-repeat:no-repeat;
			}
			ul li:nth-of-type(6){
				background-image: url(img/book_no06.gif);
				background-position: left;
				background-size: 13px,13px;
				background-repeat:no-repeat;
			}
			ul li:nth-of-type(7){
				background-image: url(img/book_no07.gif);
				background-position: left;
				background-size: 13px,13px;
				background-repeat:no-repeat;
			}
			ul li:nth-of-type(8){
				background-image: url(img/book_no08.gif);
				background-position: left;
				background-size: 13px,13px;
				background-repeat:no-repeat;
			}
			ul li:nth-of-type(9){
				background-image: url(img/book_no09.gif);
				background-position: left;
				background-size: 13px,13px;
				background-repeat:no-repeat;
			}
			ul li:last-of-type{
				background-image: url(img/book_no10.gif);
				background-position: left;
				background-size: 13px,13px;
				background-repeat:no-repeat;
			}
		</style>
	</head>
	<body>
		<h1>畅销书排行旁</h1>
		<ul>
			<li><a href="dianqi" />不抱怨的世界(畅...</li>
			<li><a href="dianqi" />遇见未知的自己...</li>
			<li><a href="dianqi" />活法（季羡林、...</li>
			<li><a href="dianqi" />高效能人士的七个习惯</li>
			<li><a href="dianqi" />被迫强大（北外女生香奈儿...</li>
			<li><a href="dianqi" />遇见心想事成的自己（《遇...</li>
			<li><a href="dianqi" />世界上最伟大的推销员（插...</li>
			<li><a href="dianqi" />我的成功可以复制（唐骏亲...</li>
			<li><a href="dianqi" />少有人走的路：心智成熟的...</li>
			<li><a href="dianqi" />活出全新的自己——唤醒...</li>
		</ul>
	</body>
</html>
